import React from 'react'
import {Image, Tooltip,message} from "antd";
import {UseGetImage} from "@/hooks/useGetImage";
import {IMAGE_DIRECTION, IMAGE_TYPE, OPERATE_PRODUCT} from "@/static/enum";
import './index.less'
export const ShippingCartInfo = (props: any) => {
  const [messageApi, contextHolder] = message.useMessage();

  const dealProduct = (type: string) => {
    if (props.quantity < 2 && type === OPERATE_PRODUCT.DELETE) {
      messageApi.open({
        type: 'warning',
        content: 'The number of babies can\'t go down anymore',
        duration: 2,
        className: 'custom-class',
        style: {
          marginTop: '20vh'
        },
      });
      return
    }
    props.dealProduct(type,{...props})
  }
  return (
    <div className="flex flex-wrap p-4 cartInfo text-base font-normal">
      {contextHolder}
      <Image
        className="product-image"
        preview={false}
        src={UseGetImage(IMAGE_TYPE.CART,props.sku,IMAGE_DIRECTION.OBSERVE)}
      />
      <div className="ml-4 text-left align-text-top w-[250px]">
        <div className="title">
          {
            props.title.length > 30 ?
              <Tooltip placement="bottomRight" title={props.title}>
                {props.title.substring(0, 30) + '...'}
              </Tooltip> :
              <span>{props.title}</span>
          }
        </div>
        <div className="mt-2 text-[#5B5A5E]">{props.size} | {props.style}</div>
        <div className="mt-[16px] text-[#5B5A5E]">Quantity: {props.quantity}</div>
      </div>
      <div className="ml-4 text-right w-[50px] ml-4">
        <Image
          className="w-4 h-4"
          src={require('@/assets/img/trash.png')}
          preview={false}
          onClick={() => dealProduct(OPERATE_PRODUCT.REMOVE)}
        />
        <div className="mt-2 text-[#EABF00]">
          <span>{props.currencyFormat}</span>
          <span className="mr-2">{props.price.toFixed(2)}</span>
        </div>
        <div className="flex mt-[16px]">
          <div className="w-6 h-6 delete" onClick={()=> dealProduct(OPERATE_PRODUCT.DELETE)}></div>
          <div className="w-6 h-6 add" onClick={()=> dealProduct(OPERATE_PRODUCT.PUSH)}></div>
        </div>
      </div>
    </div>
  )
}
